<template>
    <view class="payTypeBox">
        <view class="payCenter">			
            <view class="topInfo">
                <view class="shopName">{{$t('amount')}}</view>
                <view class="payMoney" v-if="orderloads">
                    <view class="text">{{orderinfo.symbol}}</view>
                    <view class="number">{{orderinfo.need_totalmoney | money}}</view>
                </view>
                <view class="tips u-padding-20">
					<span>{{$t('totalcost')}}：{{orderinfo.symbol}} {{orderinfo.need_totalmoney}} </span>
				</view>
            </view>
			
		<view class="u-flex u-flex-middle u-m-b-20" v-if="downtimes!=undefined&&downtimes!=0&&(finishtimes-downtimes)<timeout">
			<view class="u-p-r-10">{{$t('plstime1')}}</view>
			<count-down-time :timepoint="downtimes" :minute="timeout*1000"></count-down-time>
			<view class="u-p-l-10">{{$t('plstime2')}}</view>
		</view>

            <view class="selPayType">
                <view class="typeList" :class="{opacity:!item.state}" v-for="(item,index) in payType" :key="index" @click="onPayTypeList(index)">
                    <view class="left">
                        <view class="icon">
							<u-icon :name="item.icon" size="22" :color="item.color" customPrefix="iconfont"></u-icon>
                        </view>
                        <view class="word">
                            <view class="title">{{item.title}}</view>
                        </view>
                    </view>
                    <view class="right">
                        <view class="yue" v-if="item.yue">{{$t('balance')}}: {{item.yue}} {{orderinfo.symbol}}</view>
                        <view class="state">
                            <view class="quan" :style="{background:index == payTypeIndex?PrimaryColor:'',border:'1rpx solid '+(index == payTypeIndex?PrimaryColor:'#ddd')}">
                                <view v-if="index == payTypeIndex">
                                    <u-icon name="checkmark" :size="14" color="#fff"></u-icon>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="payButton">
                <view class="button">
                    <u-button @click="onPayButton" type="primary" :custom-style="{'border-radius':'50rpx'}" :disabled="isPayDisabled" :loading="isPayDisabled">{{$t('pay')}}</u-button>
                </view>
				
            </view>
        </view>
        <!-- 点击支付时候不能在操作任何 以下透明背景 -->
        <view class="Mask" v-if="isPayDisabled"></view>
    </view>

</template>

<script>
    import { mapState, mapMutations } from 'vuex';
    import { setPay,wxPublicPay } from '@/config/pay';
	import { api_order_view,api_assets_list,api_order_pay } from '@/config/api.js';
	import countDownTime from '@/pagesPackageA/components/count-down-time';
    export default {
		components:{
			countDownTime
		},
        props:{
			downtimes:0,
            // 金额
            payMoney:{
            	type: [String,Number]
            },
            //支付订单号
            tradeNo:{
            	type: [String,Number]
            },
            // 用于监听弹窗显示
            show:{
            	type: Boolean,
            	default() {
            		return false;
            	}
            }
        },
		computed:{
			...mapState(['userInfo','siteInfo']),
		},
        watch:{
            show(val){
                if(val){
                    this.upPay()
                }
            }
        },
		 
        data() {
            return {
				order:[],
				orderloads:false,
                PrimaryColor: '#fe461d', // 主题色
                payType: [{
                    icon: "wodeqianbao",
                    title: this.$t('balancepay'),
                    yue: '', //余额
					is_pay_way:'balance',
                    state: true, //是否有效
                    color:'#b09665'
                },
				{
					icon: "weixinzhifu",
					title: "微信支付",
					state: true,
					color:'#2dc800'
				}
				// {
    //                 icon: "a-Vector3",
    //                 title: this.$t('payToStore'),
				// 	is_pay_way:'goshoppay',
    //                 state: true,
    //                 color:'#2dc800'
    //             }, 
				// {
    //                 icon: "stripe-s",
				// 	is_pay_way:'stripe',
    //                 title: "在线支付",
    //                 state: true,
    //                 color:'#108ee9'
    //             },
				],
                payTypeIndex: 0,//当前支付选项
                isPayDisabled: false,
                wallet:0,//会员余额
				coininfo:[],
                isMember:false,//是否是会员
                payaccount:[],
                orderinfo:{
					symbol:'',
					need_totalmoney:''
				},
				finishtimes:parseInt(new Date().getTime()/1000),
				timeout:30*60
            }
        },
        async created() {
			//console.log(this.siteInfo)
			
			setTimeout(async() => {

            await api_order_view({
                orderNo: this.tradeNo,
            }).then(async res => {
                this.orderinfo = res;
				await this.isPayType()
            }).catch((e) => {});


			}, 800);
			


            // #ifdef MP-WEIXIN
            // await 
            // #endif
            // #ifdef MP-ALIPAY
            // await 
            // #endif
            
        },
        methods:{
            isPayType(){
				if (this.userInfo.token){
					this.isMember = true //判断是否会员--此处需您的接口获取
				}
                this.upPay()
            },
            // 判断当前默认选择的支付选项
            upPay(){
                console.log('upPay')
				api_assets_list({
				  member_id:this.orderinfo.member_id,
				  coinid: this.orderinfo.coinTypeid,
				}).then((res) => {
                    console.log(res)
					this.wallet = res.currentcoininfo.balance_available; //当前会员余额
                    this.payType[0].yue=this.wallet
					if(this.wallet && this.wallet>0){//如果是会员--有余额
						// 判断支付金额是否大于余额
						this.payType[0].yue = this.wallet;
						var payMoney = parseFloat(this.payMoney);
						if (payMoney > this.wallet) {
							this.payType[0].state = false
							this.payTypeIndex = 1
						}else{
							this.payType[0].state = true
							this.payTypeIndex = 0
						}
					}else{
						this.payType[0].state = false
					}
					if(!this.payType[0].state){
						console.log(!this.payType[0].state,'!this.payType[0].state')
						// #ifdef MP-ALIPAY
						this.payTypeIndex = 1
						// #endif
						// #ifdef MP-WEIXIN || APP-PLUS
						this.payTypeIndex = 1
						// #endif
					}
					this.orderloads=true
				}).catch((e) => {});
            },
            onPayTypeList(e){
                if(this.payType[e].is_pay_way=='balance'){
                    if(this.isMember) { //判断是否是会员
                        // 判断支付金额是否大于余额
                        var payMoney = parseFloat(this.payMoney);
                        if (payMoney > this.wallet) {
                            this.payType[0].state = false;
                            // #ifndef APP-PLUS
                            uni.showModal({
                                title: this.$t('tips'),
                                content: this.$t('balancelow'),
								confirmText: this.$t('confirm'),
								cancelText: this.$t('cancel'),
                                success(res) {
                                    if (res.confirm) {
                                        console.log('用户点击确定')
                                        // uni.navigateTo({
                                        //     url: '/pages/member/MemberInfo',
                                        // })
                                    } else if (res.cancel) {
                                        console.log('用户点击取消')
                                    }
                                }
                            })
                            // #endif
                            // #ifdef APP-PLUS
                            this.$showModal({
                                    concent:this.$t('balancelow'),
                                }).then(res=>{
                                    // uni.navigateTo({
                                    //     url: '/pages/member/MemberInfo',
                                    // })
                                }).catch(res=>{
                                    console.log('用户点击取消')
                                })
                            // #endif
                        }else{
                            this.payTypeIndex = e
                        }
                    } else {
                        this.$u.toast('该支付方式只支持会员用户')
                    }
                }else{
                    this.payTypeIndex = e
                }
            },
            // 去支付
            onPayButton: function() {
                var tradeNo = this.tradeNo;
                this.isPayDisabled = true

                if(this.payType[this.payTypeIndex].title == "微信支付") {
					this.isPayDisabled = false
                    // #ifdef MP-WEIXIN
                    this.onPay('mpwxpay',tradeNo)
                    // #endif
                    // #ifdef H5
                    this.onH5WxPay(tradeNo)
                    // #endif
                    // #ifdef APP
                    this.onPay('wxpay',tradeNo)
                    // #endif
                }else if(this.payType[this.payTypeIndex].title == "支付宝支付") {
                    // #ifdef APP || MP
                    this.onPay('alipay',tradeNo)
                    // #endif
                    // #ifdef H5
					this.isPayDisabled = false
                    this.$u.toast('h5支付宝支付正在开发中~')
                    
                    // #endif
                }else if(this.payType[this.payTypeIndex].is_pay_way!=''){
                    this.onPayByShopMemberCard(this.payType[this.payTypeIndex].is_pay_way)
                }
                
            },
            //支付(app、小程序)
            onPay(type,tradeNo){
                var that = this;
            	setPay({
            		type: type,
            		tradeNo: tradeNo // 订单编号
            	},res => {
					console.log(res)
                    that.isPayDisabled = false
            		// 小程序支付的回调
            		if(res.success){
                        that.$u.toast(this.$t('pay_success'))
                        that.payResult(1)
            		}else{
                        that.$u.toast(this.$t('pay_failed')+':'+res.data.msg)
						//that.$u.toast('支付失败,原因：'+res.errMsg)
                        that.payResult(0)
            		}
            	})
            },
            // 微信公众号支付
            onH5WxPay(tradeNo){
                var that = this
                wxPublicPay({
                    tradeNo:tradeNo,
                },res => {
                    that.isPayDisabled = false
                    // 支付的回调
                    if(res.success){
                        uni.$u.toast(this.$t('pay_success'))
                        that.payResult(1)
                    }else{
                        uni.$u.toast(this.$t('pay_failed'))
                        that.payResult(0)
                    }
                })
            },
            // 会员钱包支付
            onPayByShopMemberCard(payType){
                // 这里会员余额支付详情----这里是您的钱包支付接口
				this.isPayDisabled = true
				var that = this;

				api_order_pay({
					member_id:this.userInfo.member_id,
					payType: payType,
					tradeNo: this.tradeNo, // 创建支付订单时返回的 订单号
					use_coininfo_id:this.siteInfo.money.coinid
				}).then((data) => {
					this.isPayDisabled = false
					if(data.reloadurl==''&&data.status!=0){
						if(data.status!=0){
							uni.$u.toast(this.$t('pay_success'))
						}else{
							this.isPayDisabled = false
							uni.$u.toast(this.$t('pay_failed'))
						}
						that.payResult(data.status)
					}else{
						// console.log(data)
						// this.$tools.goJump('/pagesPackageA/info/webview',{
						// 	url:data.reloadurl
						// },'','launch')
						if(data.reloadurl==''&&data.status==0){
							uni.$u.toast(data.msg)
						}else{
							window.location.href=data.reloadurl
						}
					}

				}).catch((e) => {
					this.isPayDisabled = false
				});
				
            },
            // 支付统一回调
            payResult(payStatus){
                var goPayPageParameter = {
                    tradeNo: this.tradeNo, //订单号
                    payMoney: parseFloat(this.payMoney), //付款金额
                    payStatus: payStatus, //1成功、0失败 2正在查询支付结果3：支付结果未知
                }
                this.$emit('payResult',goPayPageParameter)
                console.log(goPayPageParameter, 'goPayPageParameter--')
                var goPayPageParameterData = JSON.stringify(goPayPageParameter)
                // uni.reLaunch({
                //     url: '/pages/pay/payResult?goPayPageParameterData=' + goPayPageParameterData,
                // })
            },
        }
    }
</script>

<style lang="scss" scoped>
.payTypeBox {
    .payHead {
        text-align: center;
        padding: 32rpx;
        border-bottom: 1rpx solid #eeeeee;
        .title {
            font-weight: bold;
            font-size: 30rpx;
        }
    }
}
.tips{color: #999999;}
.payCenter {
    .topInfo {
        margin-bottom: 82rpx;
        padding: 32rpx;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: column;
        align-items: center;
        .shopName {
            color: #999999;
            font-size: 28rpx;
        }
        .payMoney {
            /* #ifndef APP-NVUE */
            display: flex;
            /* #endif */
            flex-direction: row;
            align-items: flex-end;
            margin-top: 24rpx;
            .text {
                font-size: 40rpx;
                font-weight: bold;
            }
            .number {
                font-size: 70rpx;
                line-height: 70rpx;
                font-weight: bold;
            }
        }
    }
    .selPayType {
        padding: 0 40rpx 32rpx;
        .typeList {
            /* #ifndef APP-NVUE */
            display: flex;
            /* #endif */
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: 24rpx 0;
            &.opacity {
                opacity: .4;
            }
            .left {
                /* #ifndef APP-NVUE */
                display: flex;
                /* #endif */
                flex-direction: row;
                align-items: center;
                .icon {
                    width: 44rpx;
                    height: 44rpx;
                    overflow: hidden;
                    /* #ifndef APP-NVUE */
                    display: flex;
                    /* #endif */
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    border-radius: 10rpx;
                }
                .word {
                    margin-left: 10rpx;
                    .title {
                        font-size: 28rpx;
                        font-weight: bold;
                        color: #333;
                    }
                }
            }
            .right {
                /* #ifndef APP-NVUE */
                display: flex;
                /* #endif */
                flex-direction: row;
                align-items: center;
                .yue {
                    color: #999;
                }
                .state {
                    margin-left: 16rpx;
                }
                .quan {
                    width: 36rpx;
                    height: 36rpx;
                    border-radius: 36rpx;
                    border: 1rpx solid #eee;
                    /* #ifndef APP-NVUE */
                    display: flex;
                    /* #endif */
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                }
            }
        }
    }
    .payButton {
        padding: 32rpx;
        .button{
            .button-index-inlineflex {
                width: 100%;
                .btn_box {
                    width: 100%;
                }
            }
        }
        .payTips {
            margin-top: 32rpx;
            /* #ifndef APP-NVUE */
            display: flex;
            /* #endif */
            flex-direction: row;
            justify-content: center;
            align-items: center;
            .text {
                font-size: 24rpx;
                color: #999;
                margin-left: 8rpx;
            }
        }
    }
}
.Mask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100vh;
	background: #eee;
	opacity: 0.5;
    z-index: 101;
}
</style>
